<template>
  <div class="pagemain">
    <div class="bgimg">
      <div class="pc_login">
        <div class="nwtabs">用户注册</div>
        <ul class="form_list">
          <li>
            <input @blur="check_uname" v-model="uname" placeholder="请输入用户名" class="ip1" >
            <span v-if="icon1 === 1" class="iconfont icon-duigou"></span>
            <span v-else-if="icon1 === 0" class="iconfont icon-cha"></span>
            <span v-else></span>
          </li>
          <li>
            <input @blur="check_upwd" v-model="upwd" placeholder="输入密码" class="ip2" type="password">
            <span v-if="icon2 === 1" class="iconfont icon-duigou"></span>
            <span v-else-if="icon2 === 0" class="iconfont icon-cha"></span>
            <span v-else></span>
          </li>
          <li >
             <input @blur="Recheck_upwd" v-model="re_upwd" placeholder="确认密码" class="ip2" type="password">
             <span v-if="icon3 === 1" class="iconfont icon-duigou"></span>
            <span v-else-if="icon3 === 0" class="iconfont icon-cha"></span>
            <span v-else></span>
          </li>
          <li class="bt">
            <button @click="register">免费注册</button>
          </li>
         
        </ul>
        <p >
          温馨提示：
          <br />
          成功注册会员，登录后首次完善个人信息，即可获赠官网会员20积分
        </p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return {
        uname:'',
        upwd:'',
        re_upwd:'',
        icon1:'',
        icon2:'',
        icon3:''
    }
  },


  methods:{
  check_uname(){
          let uname=this.uname
          let reg=/^[\u4e00-\u9fa5a-zA-Z0-9]{6,12}$/
          if(reg.test(uname)){
            this.icon1=1
            return true
          }else{
            this.icon1=0 
            return false
          }
        },
    check_upwd(){
       let upwd=this.upwd
          let reg=/^\w{6,12}$/
          if(reg.test(upwd)){
            this.icon2=1
            return true
          }else{
            this.icon2=0 
            return false
          }
        },
        Recheck_upwd(){
          let reg=/^\w{6,12}$/
          if(this.re_upwd==this.upwd && reg.test(this.re_upwd)){
               this.icon3=1
               return true
          }else{
            this.icon3=0
            return false
          }
        },
        register(){
          if(this.check_uname() && this.check_upwd() && this.Recheck_upwd()){
            let url="/users/register"
            let param=`uname=${this.uname}&upwd=${this.upwd}`
             this.axios.post(url,param).then(
               result=>{
                 console.log(result)
                 if(result.data.code==200){
                   alert('恭喜你注册成功！！')
                   this.$router.push('/login')
                 }else{
                   alert('您注册的用户已存在，请重新输入')
                   this.upwd='' ;this.re_upwd='';this.uname=''; this.icon1='';this.icon2='';this.icon3=''
                   }
                 }
             )
          }else{
              alert('你输入的信息有误，注册失败!!!')
              this.upwd=''
              this.re_upwd=''
              this.uname=''
              this.icon1=''
              this.icon2=''
              this.icon3=''
          }
        }

}

}
      
</script>
<style scoped>
.pagemain {
  /* position: fixed; */
  margin-top: 95px;
  height: 475px;
  width: 100%;
  box-sizing: border-box;
  background-color: #e4004f;
}
.bgimg {
  width: 1100px;
  height: 400px;
  position: relative;
  margin: 0 auto;
 background: url(../assets/main.png) no-repeat 0 50px; 
}
.pc_login {
  width: 340px;
  height: 330px;
  background: #fff;
  box-sizing: border-box;
  position: absolute;
  right: 10px;
  top: 40px;
  padding: 30px;
}
.nwtabs {
  width: 280px;
  height: 35px;
  color: #555;
  font-size: 14px;
  font-weight: bold;
}
.form_list {
  font-size: 14px;
}
.form_list li {
  width: 100%;
  height: 40px;
}
/* .form_list .cb{
    height: 30px;
} */
.form_list .ip1{
  width: 90%;
  border: 1px solid #dedede;
  padding: 8px;
  margin-right: 10px;
  box-sizing: border-box;
  outline: none;
  height: 30px;
}
.form_list .ip2{
  width: 90%;
  border: 1px solid #dedede;
  padding: 8px;
  margin-right: 10px;
  box-sizing: border-box;
  outline: none;
  height: 30px;
}
.form_list a{
  color: #757575;
}



.form_list button{
    border: 1px solid #dedede;
    background-color: #e4004f;
    color: #fff;
     width: 280px;
     height: 30px;
     outline: none;
     line-break: 25px;
}

</style>